<template>
  <el-collapse-item name="association">
    <template slot="title">
      <PartitionTitle title="关联异常"></PartitionTitle>
    </template>

    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" border v-loading="loading">
      <el-table-column label="序号" type="index" width="80" align="center">
        <template slot-scope="scope">
          <span>{{
            utils.tableSerialNumber(scope, pager.pageNum, pager.pageSize)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="异常单号" prop="abnormalNo"></el-table-column>
      <el-table-column label="异常名称" prop="abnormalName"></el-table-column>
      <el-table-column label="关联设备" prop="equipmentName"></el-table-column>
      <el-table-column label="产线" prop="lineName"></el-table-column>
      <el-table-column label="责任人" prop="processedName"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span :class='"status_"+scope.row.status'>{{statusMap[scope.row.status]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="异常描述" prop="abnormalDes"></el-table-column>
      <el-table-column label="生成时间" prop="buildDate"></el-table-column>
    </el-table>
    <pagination
      v-if='pager.total > 5'
      :total="pager.total"
      :pageSizes="[5,10,20]"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
  </el-collapse-item>
</template>
<script>
  import { associatedsAbnormal} from "@/api/exceptionMgmt/abnormal";
  import {statusMap} from "../enum.js"
export default {
  props:{
    abnormalData:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      loading:false,
      statusMap,
      tableData:[],
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 5,
      },
    }
  },

  methods:{
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query: {
          id:this.abnormalData.id
        },
        pageNum,
        pageSize,
      };
      associatedsAbnormal(param)
        .then((res) => {
          this.tableData = res?.rows || this.tableData;
          this.pager.total = res?.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.pager.total = 0;
          this.loading = false;
        });
    }
  },
  watch:{
    abnormalData:{
      handler(list){
        if(list?.id){
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  margin: 20px 0 10px;
}
.block-title {
  margin-bottom: 0;
}
.status-1{
  color: #D9001B;
  font-weight: 600;
}

.status-2{
  color: #F59A23;
  font-weight: 600;
}
.status-3{
  color: #88c446;
  font-weight: 600;
}
.status-4{
  color: #666666;
  font-weight: 600;
}
.status-5{
  color: #666666;
  font-weight: 600;
}
</style>
